<template>
    <div class="app-container" v-loading="loading">
        <div class="contentBox" >
        <!-- 数据列表 -->
        <div title="钻孔取样" v-show="dirllVisible" width="80%">
            <el-tabs tab-position="left">
                <el-tab-pane label="钻孔信息">
                    <el-table :data="dirllDepthData" :height="600">
                        <el-table-column property="locationCode" width="250" label="储罐编号"></el-table-column>
                        <el-table-column property="shortDesc" label="钻孔描述"></el-table-column>
                        <el-table-column property="drillDate" label="钻孔时间"></el-table-column>
                        <el-table-column property="method" label="钻孔方法"></el-table-column>
                        <el-table-column property="equipment" label="钻孔设备"></el-table-column>
                        <el-table-column property="startDepth" label="起点深度"></el-table-column>
                        <el-table-column property="endDepth" label="终点深度"></el-table-column>
                        <el-table-column property="diameter" label="转孔直径"></el-table-column>
                        <el-table-column property="geoMaterial" label="岩土名称"></el-table-column>
                        <el-table-column property="geoType" label="岩土类别"></el-table-column>
                        <el-table-column property="color" label="岩土颜色"></el-table-column>
                        <el-table-column property="compactness" label="岩土密度"></el-table-column>
                        <el-table-column property="moisture" label="岩土湿度"></el-table-column>
                        <el-table-column property="plasticity" label="可塑性"></el-table-column>
                        <el-table-column property="permeability" label="渗透性"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="钻孔数据">
                    <el-table :data="dirllVData" :height="600">
                        <el-table-column property="samplingname" width="320" label="样本编码"></el-table-column>
                        <el-table-column property="sitename" label="点位编码"></el-table-column>
                        <el-table-column property="analysisname" label="分析方法"></el-table-column>
                        <el-table-column property="depths" label="深度"></el-table-column>
                        <el-table-column property="pname" label="要素名称"></el-table-column>
                        <el-table-column property="parametersId" label="要素id"></el-table-column>
                        <el-table-column property="vals" label="要素值"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div title="EM" v-show="EMVisible" width="80%">
            <el-table :data="emData" :height="600">
                <el-table-column property="samplingname" label="样本编码"></el-table-column>
                <el-table-column property="sitename" label="点位编码"></el-table-column>
                <el-table-column property="analysisname" label="分析方法"></el-table-column>
                <el-table-column property="depths" label="深度"></el-table-column>
                <el-table-column property="pname" label="要素名称"></el-table-column>
                <el-table-column property="parametersId" label="要素id"></el-table-column>
                <el-table-column property="vals" label="要素值"></el-table-column>
            </el-table>
        </div>
        
        <div title="监测井" v-show="wellVisible" width="80%">
            <el-table :data="wellData" :height="600">
                <el-table-column property="samplingname" label="样本编码"></el-table-column>
                <el-table-column property="sitename" label="点位编码"></el-table-column>
                <el-table-column property="analysisname" label="分析方法"></el-table-column>
                <el-table-column property="depths" label="深度"></el-table-column>
                <el-table-column property="pname" label="要素名称"></el-table-column>
                <el-table-column property="parametersId" label="要素id"></el-table-column>
                <el-table-column property="vals" label="要素值"></el-table-column>
            </el-table>
        </div>

        <div title="ERT" v-show="ertVisible" width="80%">
            <el-table :data="ertData">
                <el-table-column property="id"  align="center" label="侧线id"></el-table-column>
                <el-table-column property="name" label="侧线名称"></el-table-column>
                <el-table-column property="fileName" label="文件名"></el-table-column>
                <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding"
                            width="220">
                            <template slot-scope="scope">
                                <el-button
                                    size="medium"
                                    type="text"
                                    class="deletBtn"
                                  
                                    @click.stop="handleDowload(scope.row)"
                                >下载</el-button>
                        </template>
                    </el-table-column>  
            </el-table>
            <div class="hear">查看图片</div>
            <div class="imgShow">
                <el-image
                    class="img"
                    :src="url"></el-image>
            </div>
        </div>
    </div>
    <el-dialog
            title="查看图片"
            :visible.sync="open"
            :close-on-click-modal="false"
            append-to-body
        >
    </el-dialog>
    </div>
</template>

<script>
import {getDrillGrid,getEMGrid,getWellGrid,getErtGrid} from "@/api/data/proData"
import { saveAs } from 'file-saver'
export default {
    name: 'tableList',
    data() {
        return {
            //加载等待
            loading:true,
            //请求数据
            paramsData:undefined,
            // 钻孔表格弹框
            dirllVisible:false,
            //查看图片
            url:'',
            open:false,
            // 钻孔深度表格数据
            dirllDepthData:[],
            dirllVData:[],
            EMVisible:false,
            emData:[],
            wellVisible:false,
            wellData:[],
            ertVisible:false,
            ertData:[],
        };
    },
    computed: {
    },
    
    watch:{
        
    },
    mounted() {
        this.paramsData = this.$route.query
        let dataType= this.paramsData.dataType;
        let data = this.paramsData 
        console.log(dataType)
        if(dataType == '钻孔取样'){
            getDrillGrid(data).then(res=>{
                this.dirllVisible=true
                this.dirllDepthData = res.data.depths
                this.dirllVData =  res.data.vDatas
            })
        }else if(dataType == 'EM'){
            this.EMVisible = true
            this.emData=[]
            getEMGrid(data).then(res=>{
                this.emData = res.data
            })
        }else if(dataType == '监测井取样'){
            this.wellVisible = true
            this.wellData =[]
            getWellGrid(data).then(res=>{
                this.wellData = res.data
            })
        }else if(dataType == 'ERT'){
            this.ertVisible = true
            this.ertData =[]
            getErtGrid(data).then(res=>{
                this.ertData = res.data
                let row = this.ertData[0]
                this.url =this.baseUrl+'/subnet/'+row.webpath+'/'+row.fileName+'.'+row.filetype
            })
        }
        this.loading=false
    },

    methods: {
        //查看图片
        handleShow(row){
            this.url =this.baseUrl+'/subnet/'+row.webpath+'/'+row.fileName+'.'+row.filetype
            this.open = true
        },
        // 下载图片
        handleDowload(){
            saveAs(this.url) 
        }
    },
};
</script>

<style lang="scss" scoped>
.app-container{
    box-sizing: border-box;
    padding: 20px;
    .contentBox{
        background: #fff;
    }
}
.imgShow{
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    // height: 600px;
    .img{
        width: 100%;
        // 
    }
}
.hear{
    font-size: 18px;
    margin: 10px;

}
</style>